<template>
  <div class="fourth" :class="{current:iscurrent==3}">
    <div class="search clearfix">
      <img src="../images/search.png" alt="" class="bar">
      <span class="text"></span>
      <img src="../static/images/result.png" alt="" class="result">
    </div>
    <img src="../images/info_4.png" alt="" class="info4" >
  </div>
</template>

<script>
export default {
  name: "Section4",
  data() {
    return {};
  },
  props: ["iscurrent"],
  created() {}
};
</script>

<style scoped>
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.fourth{
    position: relative;
}
.fourth .search {
    width: 529px;
    height: 438px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-120%,-50%);
}
.fourth .search>.bar{
    width: 529px;
    height: 66px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%,0);
    transition: transform 1s;
}
.fourth .search>.text{
    width: 0;
    height: 22px;
    position: absolute;
    background: url("../images/key.png") no-repeat;
    left: 15px;
    top: 20px;
}
.fourth .search>.result {
    width: 529px;
    height: 0;
    position: absolute;
    left: 0px;
    top: 53px;
}
.fourth .info4{
    width: 612px;
    height: 299px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0%,-50%);
}

.fourth.current .bar {
    transform: none;
}
.fourth.current .text{
    width: 99px;
    transition: width 1s 1s steps(5);
    /* animation: dazi 1s steps(5) infinite; */
}
/* @keyframes dazi{
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
} */
.fourth.current .result{
    height: 372px;
    transition: height 1s 2s;
}
</style>